<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>找回密码</title>
    <!-- 引入 WeUI CDN 链接 -->
    <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.4.0/weui.min.css"/>
    <link rel="stylesheet" href="./css/base.css"/>

</head>
<body>
<div class="page">
    <div class="weui-form" style="min-height: 80%">
        <div class="weui-form__text-area">
            <h2 class="weui-form__title">找回密码</h2>
        </div>
        <div class="weui-form__control-area">
            <div class="weui-cells__group weui-cells__group_form">
                <div class="weui-cells weui-cells_form">
                    <div class="weui-cell weui-cell_active">
                        <div class="weui-cell__hd"><label class="weui-label">手机号</label></div>
                        <div class="weui-cell__bd">
                            <input class="weui-input" type="number"  placeholder="请输入手机号" id="i-mobile" value=""/>
                        </div>
                    </div>
                    <div class="weui-cell weui-cell_active">
                        <div class="weui-cell__hd"><label class="weui-label">新密码</label></div>
                        <div class="weui-cell__bd">
                            <input class="weui-input" type="password"  placeholder="请输入密码" id="i-password" value=""/>
                        </div>
                    </div>
                    <div class="weui-cell weui-cell_active">
                        <div class="weui-cell__hd"><label class="weui-label">确认密码</label></div>
                        <div class="weui-cell__bd">
                            <input class="weui-input" type="password" placeholder="输入确认密码" id="i-repeat-password" value=""/>
                        </div>
                    </div>
                    <div class="weui-cell weui-cell_active weui-cell_vcode">
                        <div class="weui-cell__hd"><label class="weui-label">验证码</label></div>
                        <div class="weui-cell__bd">
                            <input autofocus class="weui-input" type="text"  id="i-code" placeholder="输入验证码" maxlength="6"/>
                        </div>
                        <div class="weui-cell__ft">
                            <button class="weui-btn weui-btn_default weui-vcode-btn" id="b-getcode">获取验证码</button>
                        </div>
                    </div>
                </div>
                <div class="weui-cells__tips" style="margin-top: 20px">
                    <a class="weui-link" href="./login.html">记起密码，去登录</a>
                </div>
            </div>
        </div>

        <div class="weui-form__opr-area">
            <a class="weui-btn weui-btn_primary" href="javascript:" id="doRegister">确定</a>
        </div>
    </div>
    <div class="weui-toptips weui-toptips_warn" id="topTips"></div>


</div>
<script src="./js/zepto.min.js"></script>
<script type="text/javascript">
    $(function(){
        $("#doRegister").click(function(){
            const mobile = $("#i-mobile").val();
            const password = $("#i-password").val();
            const repeatPassword = $("#i-repeat-password").val();
            const code = $("#i-code").val();
            if(!(/^1[3456789]\d{9}$/.test(mobile))){
                msg('手机格式不正确');
                return false
            }
            if(!(/^.{6,}$/.test(password))){
                msg('密码不能少于6位');
                return false
            }
            if (repeatPassword !== password) {
                msg('两次密码不一致');
                return false
            }
            $.post('/forget', {mobile: mobile, password: password, repeat: repeatPassword, code: code}, function (res) {
                if (res.code !== 0) {
                    msg(res.msg);
                } else {
                    msg('修改成功');
                    setTimeout(function () {
                        window.location.href = '/login.html'
                    }, 1500)
                }
            })
        })

        $("#b-getcode").click(function(){
            const mobile = $("#i-mobile").val();
            if(!(/^1[3456789]\d{9}$/.test(mobile))){
                msg('手机格式不正确');
                return false
            }
            $.post('/send_code', {mobile: mobile}, function (res) {
                if (res.code !== 0) {
                    msg(res.msg);
                } else {
                    msg(res.data.msg);
                    const getcode = $("#b-getcode")
                    getcode.attr("disabled",true);
                    incTime(60)
                }
            })
        })

        function incTime(time) {
            const getcode = $("#b-getcode")
            if(time <= 0) {
                getcode.removeAttr("disabled");
                getcode.text("获取验证码");
                return false;
            }
            getcode.text((time - 1) + "秒")
            setTimeout(function () {
                incTime(time - 1)
            }, 1000)
        }

    });

    function msg(msg, time = 1000) {
        const topTip = $('#topTips');
        topTip.text(msg);
        topTip.fadeIn(msg);
        setTimeout(function () {
            topTip.fadeOut()
        }, time)
    }
</script>
</body>
</html>
